<template>
  <div class="future-vision">
    <div class="trend-overview">
      <h2>趋势概览</h2>
      <TrendGraph :data="trendData" />
      <div class="kpi-cards">
        <KpiCard title="关键指标1" value="80%" />
        <KpiCard title="关键指标2" value="90%" />
        <KpiCard title="关键指标3" value="70%" />
      </div>
    </div>

    <div class="tech-roadmap">
      <h2>技术路线图</h2>
      <Roadmap :milestones="milestones" />
    </div>

    <div class="interactive-qa">
      <h2>互动问答</h2>
      <QAAccordion :questions="qaData" />
      <CallToAction />
    </div>
  </div>
</template>

<script>
import TrendGraph from "../components/TrendGraph.vue";
import KpiCard from "../components/KpiCard.vue";
import Roadmap from "../components/Roadmap.vue";
import QAAccordion from "../components/QAAccordion.vue";
import CallToAction from "../components/CallToAction.vue";

export default {
  components: {
    TrendGraph,
    KpiCard,
    Roadmap,
    QAAccordion,
    CallToAction
  },
  data() {
    return {
      trendData: [
        { year: "2025", value1: 230, value2: 340, value3: 450 },
        { year: "2026", value1: 340, value2: 450, value3: 560 },
        { year: "2027", value1: 450, value2: 560, value3: 670 },
        { year: "2028", value1: 560, value2: 670, value3: 780 },
        { year: "2029", value1: 670, value2: 780, value3: 890 }
      ],
      milestones: [
        { year: "2025", event: "人工智能普及化" },
        { year: "2026", event: "无人驾驶商业化" },
        { year: "2027", event: "泛在信息社会初步实现" },
        { year: "2028", event: "量子计算突破" },
        { year: "2029", event: "全球物联网覆盖" }
      ],
      qaData: [
        { question: "Q1: 人工智能能否完全替代人类？", answer: "A1: 目前来看，人工智能在某些领域表现出色，但仍无法完全替代人类的创造力和情感。" },
        { question: "Q2: 泛在信息社会的挑战是什么？", answer: "A2: 泛在信息社会面临的挑战包括隐私保护、数据安全和法律监管。" }
      ]
    };
  }
};
</script>

<style scoped>
.future-vision {
  background-color: #f9f9f9; /* 浅色背景 */
  color: #333; /* 深色文字 */
  padding: 20px;
  font-family: Arial, sans-serif;
}
h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.trend-overview,
.tech-roadmap,
.interactive-qa {
  margin-bottom: 40px;
}
.kpi-cards {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
</style>